<template>
    <div class="parameter-maintenance">
        <div class="left">
            <div class="name">
                <span class="label">模型名称</span>
                <el-input :value="info.modelName" disabled></el-input>
            </div>
            <div class="road-type">{{ info.pavementType }}</div>
            <div class="select-box">
                <div class="select-item">
                    <div class="title">技术指标</div>
                    <ul class="list">
                        <li
                            v-for="item in technicalIndexOptions"
                            :key="item.value"
                            class="item"
                            :class="{ active: form.technicalIndicators === item.label }"
                            @click="form.technicalIndicators = item.label"
                        >
                            {{ item.label }}
                        </li>
                    </ul>
                </div>
                <div class="select-item">
                    <div class="title">AADT</div>
                    <ul class="list">
                        <li
                            v-for="item in AADTOptions"
                            :key="item.value"
                            class="item"
                            :class="{ active: form.aadt === item.value }"
                            @click="form.aadt = item.value"
                        >
                            {{ item.label }}
                        </li>
                    </ul>
                </div>
            </div>
            <div class="form">
                <h3 class="title">{{ info.modelFormulaName }}：</h3>
                <el-form ref="form" :model="parameter" label-width="66px" size="mini">
                    <el-form-item
                        v-for="(value, key) in parameter"
                        :key="key"
                        :label="key.includes('</') ? '' : key + ' ='"
                        :prop="key"
                        :rules="{ validator: validNumber, trigger: 'blur' }"
                    >
                        <span v-if="key.includes('</')" slot="label" v-html="key + ' ='"></span>
                        <el-input v-model="parameter[key]"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <BaseButton :disabled="btnDisabled" :loading="submitLoading" @click="handleUse">应用</BaseButton>
                        <BaseButton type="second" @click="handleHistory">历史</BaseButton>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="right">
            <div class="formula">
                <span class="label">{{ info.modelFormulaName }}公式：</span>
                <img class="img" :src="info.url" alt="模型公式" />
            </div>
            <ForecastCurve ref="forecastCurve"></ForecastCurve>
        </div>
        <HistoryDialog ref="historyDialog" @success="historyApplySuccess"></HistoryDialog>
    </div>
</template>

<script>
import { AADTOptions } from '@/views/auxiliary-decision/constants'
import ForecastCurve from './components/ForecastCurve.vue'
import HistoryDialog from './components/HistoryDialog.vue'
import { PerformancePredictionModel } from '@/models'
import { isNumberOrDecimals } from '@/utils/validate'

export default {
    name: 'ParameterMaintenance',
    components: {
        ForecastCurve,
        HistoryDialog
    },
    data() {
        return {
            AADTOptions,
            model: new PerformancePredictionModel(),
            technicalIndexOptions: [
                {
                    value: 1,
                    label: 'PCI'
                },
                {
                    value: 2,
                    label: 'RQI'
                },
                {
                    value: 3,
                    label: 'RDI'
                },
                {
                    value: 4,
                    label: 'SRI'
                }
            ],
            form: {
                technicalIndicators: 'PCI',
                aadt: ''
            },
            rules: {},
            parameter: {},
            info: {},
            btnDisabled: true,
            submitLoading: false
        }
    },
    watch: {
        parameter: {
            handler() {
                const list = Object.values(this.parameter)
                this.btnDisabled = !list.every((item) => item !== '' && item !== null && item !== undefined)
            },
            deep: true
        }
    },
    created() {
        this.info = this.$route.query
        this.getFormualParame()
    },
    methods: {
        historyApplySuccess(data) {
            this.form = data
            this.getFormualParame()
        },
        handleUse() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.submitLoading = true
                    const data = {
                        modelId: this.info.id,
                        technicalIndicators: this.form.technicalIndicators,
                        aadt: this.form.aadt,
                        parameter: JSON.stringify(this.parameter)
                    }
                    this.model
                        .handledUsed(data)
                        .then((res) => {
                            this.$refs['forecastCurve'].initChart(res, data.technicalIndicators)
                        })
                        .finally(() => {
                            this.submitLoading = false
                        })
                }
            })
        },
        getFormualParame() {
            const data = {
                modelId: this.info.id,
                modelFormula: this.info.modelFormula
            }
            this.model.getFormualParame(data).then((res) => {
                this.parameter = JSON.parse(res.parameter || '{}')
                // 这两个值可能为空，赋个默认值
                res.technicalIndicators = res.technicalIndicators || 'PCI'
                res.aadt = res.aadt || this.AADTOptions[0].value
                this.form = res || {}
                res.id && this.handleUse()
            })
        },
        handleHistory() {
            this.$refs['historyDialog'].open(this.info.id)
        },
        validNumber(rule, value, callback) {
            if (value === '' || value === undefined || value === null || value === '0') {
                callback()
            } else if (!isNumberOrDecimals(value)) {
                callback(new Error('格式错误'))
            } else {
                callback()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.parameter-maintenance {
    width: 100%;
    display: flex;
    .left {
        width: 400px;
        flex-shrink: 0;
        .name {
            display: flex;
            align-items: center;
            .label {
                width: 100px;
            }
        }
        .road-type {
            width: 100%;
            padding: 8px 0;
            margin: 16px 0;
            text-align: center;
            background-color: #0062ff;
            color: #fff;
            border-radius: 4px;
        }
        .select-box {
            display: flex;
            justify-content: space-between;
            .select-item {
                width: 49%;
                .list {
                    height: 130px;
                    border: 1px solid #dcdfe6;
                    font-size: 14px;
                }
                .title {
                    margin-bottom: 8px;
                    padding: 0 8px;
                    font-weight: bold;
                }
                .item {
                    padding: 4px 8px;
                    cursor: pointer;
                    &:hover,
                    &.active {
                        background-color: rgba(0, 98, 255, 0.06);
                    }
                }
            }
        }
        .form {
            margin-top: 16px;
            padding: 8px 16px;
            border: 1px solid #dcdfe6;
            .title {
                margin: 8px 0 16px 0;
                font-weight: bold;
            }
        }
    }
    .right {
        flex: 1;
        .formula {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 32px;
            .img {
                max-height: 62px;
            }
        }
    }
}
</style>
